<template>
    <el-container>
        <el-header>
            <img class="logo" src="../views/frontstage/img/footer-logo.png" alt="">
            <div class="rightPart">
                <div v-if="islogin!=null">
                    <HearderLogin  @exittologin="clearUser"></HearderLogin>
                </div>
                <div v-else>
                    <HearderNotLogin></HearderNotLogin>
                </div>
            </div>
        </el-header>
        <div class="leftPart">
            <el-menu router default-active="/MyIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item  index="/MyIndex">首页</el-menu-item>
                <el-menu-item index="/ShopCategory">
                    <template slot="title" >
                        <span>商城</span>
                    </template>
                </el-menu-item>
                <el-menu-item  index="/SocialMain">
                    <span>同袍圈</span>
                </el-menu-item>
                <el-menu-item>
                    <el-autocomplete
                            :v-model="state"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="搜索．．．"
                            @select="handleSelect"
                    >
                    </el-autocomplete>

                </el-menu-item>
                <el-menu-item>
                    <el-dropdown>
                        <span class="el-dropdown-link"><i class="el-icon-shopping-cart-1" style="font-size: 45px"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <div class="buycar">
                                <h3 class="rich-cart-title">最近加入的商品:</h3>
                                <div class="goods-list">
                                    <div class="goods-item " data-num="1">
                                        <div class="goods-img">
                                            <a href="//www.yohobuy.com/product/52214590.html">
                                                <img src="//img11.static.yhbimg.com/goodsimg/2019/10/12/18/0187ad6f3c39028c1ef00c068463b1578a.jpg?imageMogr2/thumbnail/46x62/background/d2hpdGU=/position/center/quality/90">
                                            </a>
                                        </div>
                                        <div class="goods-info">
                                            <p class="title">
                                                <a href="//www.yohobuy.com/product/52214590.html">NBA STYLE  亚特兰大老鹰队连帽棉衣</a>
                                            </p>
                                            <p>
                                                颜色:<span>黑色</span>
                                                尺码:XL
                                            </p>
                                        </div>
                                        <div class="goods-price">
                                            <p>¥1269.00 x 1</p>
                                            <p>
                                                <a href="javascript:void(0)" class="cart-goods-del" data-id="" data-cheapest="" data-sku="4433278" data-proid="0" data-num="1">删除</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
            </el-menu>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </el-container>
</template>
<script>
    import HearderLogin from "./HearderLogin";
    import HearderNotLogin from "./HearderNotLogin";
    export default {
        name :'HeaderNavigation',
        data(){
            return{
                islogin:'',
                state:''
            }

        },
        mounted() {
            console.log('测试用登录1');
            this.restaurants = this.loadAll();
            this.controlUserLogin();
        },
        updated() {

        },
        destroyed() {

        },
        created(){
            /*测试用登录*/
            console.log('测试用登录');
            if(window.sessionStorage.getItem('token')!=null){
                this.islogin=window.sessionStorage.getItem('token');
            }else {
                this.islogin=null;
            }
        },
        methods:{
            changeLogin(){
                console.log(父类);
                this.islogin = true;
            },
            controlUserLogin(){
                if (this.$store.state.isLogin == true){
                    this.islogin=true;
                }

            },
            clearUser(val){
                this.islogin = val;
                // console.log(val);
               window.sessionStorage.clear()
            },
            loadAll() {
                return [

               ];
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {

            }
        },
        components:{
            HearderNotLogin,
            HearderLogin
        },
    }
</script>
<style scoped>
    .logo{
        float: left;
        margin-left: 10vw;
        height: 60%;
        margin-top: 10px;
    }
    .rightPart{
        float: right;
        margin-right: 10vw;
    }
    .leftPart>ul{
        background-color: rgb(245,245,245);
    }
    .el-header:first-child{
        background-color: #272727;
    }
    .leftPart>ul>li:first-child{
        margin-left: 15vw;
    }
    .leftPart>ul>li{
        font-weight: 600;
        font-size: 20px;
        margin-right: 5em;
    }
    /deep/.el-submenu__title{
        font-weight: 600;
        font-size: 17px;
        text-indent: 1em;
    }
    .first-classification{
        font-weight: 600;
        font-size: 17px;
        color: #909399;
        text-indent: 1em;
    }
    .second-classification{
        font-weight: 600;
        font-size: 15px;
        color: #909399;
    }
    span{
        font-size: 20px;
        margin-left: -1em;
    }
    .leftPart>ul>li:last-child{
        float: right;
    }
    .buycar{
        position: absolute;
        width: 378px;
        background-color: rgb(245,245,245);
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
    }
    .rich-cart-title{
        font-size: 16px;
        color: #000;
        line-height: 16px;
        margin: 0 26px;
        padding: 18px 0;
        border-bottom: 1px solid #dcdcdc;
    }
    .goods-list{
        padding-top: 5px;
        padding-bottom: 5px;
        overflow-x: hidden;
    }
    .goods-img{
        width: 46px;
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
    }
    .goods-info{
        font-size: 10px;
        display: inline-block;
        vertical-align: top;
        margin-left: 16px;
        width: 160px;
        color: #b0b0b0;
    }
    .title{
        margin-top: 8px;
        width: 160px;
        height: 14px;
        font-size: 14px;
        color: #444;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 12px
    }
    .goods-info span {
        display: inline-block;
        max-width: 50px;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
    .goods-price {
        min-width: 90px;
        text-align: right;
    }
    .goods-item>div {
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
    }
    .goods-price p:first-child {
        margin-top: 8px;
    }
    .goods-item p {
        font-size: 14px;
        color: #000;
        margin-bottom: 12px;
    }
</style>